<template>
  <div class="login-main">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form" :model="loginData.loginMsg" :rules="rules" ref="ruleFormRef">
          <h1>Hello</h1>
          <h2>欢迎</h2>
          <el-form-item class="input" prop="username">
            <el-input :prefix-icon="(User as any)" placeholder="请输入账号" v-model="loginMsg.username"/>
          </el-form-item>
          <el-form-item class="input" prop="password">
            <el-input type="password" placeholder="请输入密码" show-password :prefix-icon="(Lock as any)"
                      v-model="loginMsg.password"/>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" class="login_btn" type="primary" size="default" @click="userLogin(ruleFormRef)">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>


<script setup lang="ts">
import {User, Lock} from '@element-plus/icons-vue';
import {onMounted, reactive, ref, toRefs} from "vue";
import {useUserStore} from "@/store/modules/user.ts"
import {useRouter} from "vue-router"
import {ElNotification, FormInstance, FormRules} from "element-plus";
import {getTime} from "@/utils/time.ts";


// const useStore = useUserStore()
const $router = useRouter()
//获取el-form组件
const ruleFormRef = ref<FormInstance>()
const loginData = reactive({
  loginMsg: {
    username: 'admin',
    password: 'atguigu123'
  },
  loading: false
})
const {loginMsg, loading} = toRefs(loginData)

onMounted(() => {
  // login()
})


const validatorUserName = (rule: any, value: any, callback: any) => {
  if (value.length >= 5) {
    callback();
  } else {
    callback(new Error('账号长度至少五位'));
  }
}

const validatorPassword = (rule: any, value: any, callback: any) => {
  if (value.length >= 6) {
    callback();
  } else {
    callback(new Error('密码长度至少六位'));
  }
}

const rules = reactive<FormRules>({
  username: [
    // { required: true, min: 5, max: 10, message: '账号长度至少六位', trigger: 'change' }
    {trigger: 'change', validator: validatorUserName}
  ],
  password: [
    // { required: true, min: 6, max: 15, message: '密码长度至少6位', trigger: 'change' }
    {trigger: 'change', validator: validatorPassword}
  ]
})

const userLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    console.log('formEl is undefined');
    return;
  }
  await formEl.validate(async (valid, fields) => {
    console.log('Validation result:', valid, fields);
    if (valid) {
      loginData.loading = true;
      try {
        ElNotification({
          type: 'success',
          message: '欢迎回来',
          title: `HI,${getTime()}好`
        });
        console.log('Navigating to /home');
        await $router.push('/home');
        loginData.loading = false;
      } catch (error) {
        loginData.loading = false;
        ElNotification({
          type: 'error',
          message: (error as Error).message
        });
        console.error('Navigation error:', error);
      }
    } else {
      console.log('error submit!', fields);
    }
  });
}


</script>


<style scoped lang="less">


.login-main {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;

  .login_form {
    position: relative;
    width: 55%;
    top: 30vh;
    background: url("@/assets/images/login_form.png") no-repeat;
    background-size: cover;
    padding: 40px;

    h1 {
      color: white;
      font-size: 40px;
    }

    h2 {
      font-size: 20px;
      color: white;
      margin: 30px 0;
    }

    .input {
      margin: 20px 60px 20px 60px;
    }

    .login_btn {
      margin: 0 60px;
      width: 100%;
    }
  }
}
</style>
